<template>
  <div>
    <a-tabs default-active-key="1" size="large">
      <a-tab-pane key="1" tab="就业信息">
        <div>

          <div class="projectwarp">
            <div>
              <div class="warptop" v-if="tableshow">
                <a-input-search placeholder="输入项目名称" style="width: 200px;height: 32px;float: left;" />
                <a-select v-model:value="value1" :size="size" style="width: 200px;float: left;margin-left: 16px;"
                  :options="options"></a-select>
                <a-button type="primary" style="float: right;" @click="createnewfc()">
                  <a-icon type="plus" />
                  新建
                </a-button>
              </div>

              <!-- 表格 -->
              <a-table :data-source="dataSource" :columns="columns" v-if="tableshow">
                <template slot='state' slot-scope="item,row">
                  <span v-if="item==0" class="daishenhe"><span class="dots dotdaishen"></span>待审核</span>
                  <span v-if="item==1" class="yishenhe"><span class="dots dotyishen"></span>已审核</span>
                  <span v-if="item==2" class="yibohui"><span class="dots dotyibo"></span>已驳回</span>
                </template>

                <template slot='state1' slot-scope="item,row">
                  <span v-if="item==0" class="daishenhe">上线</span>
                  <span v-if="item==1" class="yishenhe">下线</span>
                </template>

                <template slot="cover" slot-scope="item,row">
                  <a href="#" class="txta" @click="createnewfc()">编辑</a>
                  <a v-if="row.state1==1" href="#" class="txta" @click="">上线</a>
                  <a v-if="row.state1==0"  href="#" class="txta" @click="">下线</a>
                </template>
              </a-table>
            </div>
          </div>


        </div>


        <!-- 新建项目页面 -->
        <div class="zwxx" v-if="createnew">

            <div class="mt20">
              <p class="txtt">基本信息</p>
              <div class="flx1">
                <div class="flx2">
                  <span class="titles"><span class="xinghao">*</span>职位名称</span>
                  <a-input v-model:value="value" placeholder="" style="width: 280px;height: 40px;" />
                </div>
                <div class="flx2">
                  <span class="titles"><span class="xinghao">*</span>行业</span>
                  <a-select
                        ref="select"
                        v-model:value="value1"
                        style="width: 280px;height: 40px;"
                        @focus="focus"
                        @change="handleChange"
                      >
                        <a-select-option value="jack">Jack</a-select-option>
                        <a-select-option value="lucy">Lucy</a-select-option>
                        <a-select-option value="disabled" disabled>Disabled</a-select-option>
                        <a-select-option value="Yiminghe">yiminghe</a-select-option>
                      </a-select>
                </div>
                <div class="flx2">
                  <span class="titles"><span class="xinghao">*</span>工作性质</span>
                  <a-select
                        ref="select"
                        v-model:value="value1"
                        style="width: 280px;height: 40px;"
                        @focus="focus"
                        @change="handleChange"
                      >
                        <a-select-option value="jack">Jack</a-select-option>
                        <a-select-option value="lucy">Lucy</a-select-option>
                        <a-select-option value="disabled" disabled>Disabled</a-select-option>
                        <a-select-option value="Yiminghe">yiminghe</a-select-option>
                      </a-select>
                </div>
                <div class="flx2">
                  <span class="titles"><span class="xinghao">*</span>标签（标签之间用“，”隔开）</span>
                  <a-input v-model:value="value" placeholder="" style="width: 280px;height: 40px;" />
                </div>
                <div class="flx2">
                  <span class="titles"><span class="xinghao">*</span>薪资待遇</span>
                  <a-radio-group v-model:value="values" class="checkvalue">
                    <a-radio :value="1">月薪</a-radio>
                    <a-radio :value="2">日薪</a-radio>
                    <a-radio :value="3">面议</a-radio>
                  </a-radio-group>
                </div>
                <div class="flx2">
                  <span class="titles"><span class="xinghao">*</span>选择区间</span>
                  <a-select
                        ref="select"
                        v-model:value="value1"
                        style="width: 136px;height: 40px;margin-right: 8px;"
                        @focus="focus"
                        @change="handleChange"
                      >
                        <a-select-option value="jack">8K</a-select-option>
                        <a-select-option value="lucy">Lucy</a-select-option>
                        <a-select-option value="disabled" disabled>Disabled</a-select-option>
                        <a-select-option value="Yiminghe">yiminghe</a-select-option>
                      </a-select>
                      <a-select
                            ref="select"
                            v-model:value="value1"
                            style="width: 136px;height: 40px;"
                            @focus="focus"
                            @change="handleChange"
                          >
                            <a-select-option value="jack">10K</a-select-option>
                            <a-select-option value="lucy">Lucy</a-select-option>
                            <a-select-option value="disabled" disabled>Disabled</a-select-option>
                            <a-select-option value="Yiminghe">yiminghe</a-select-option>
                          </a-select>
                </div>
              </div>

            </div>

            <div class="mt20">
              <span class="titles"><span class="xinghao">*</span>福利待遇</span>
              <a-input v-model:value="value" placeholder="" style="width: 640px;height: 40px;" />
            </div>
            <div class="mt20">
              <span class="titles"><span class="xinghao">*</span>工作地点</span>
              <a-select
                    ref="select"
                    v-model:value="value1"
                    style="width: 136px;height: 40px;"
                    @focus="focus"
                    @change="handleChange"
                  >
                    <a-select-option value="jack">10K</a-select-option>
                    <a-select-option value="lucy">Lucy</a-select-option>
                    <a-select-option value="disabled" disabled>Disabled</a-select-option>
                    <a-select-option value="Yiminghe">yiminghe</a-select-option>
                  </a-select>
              <a-input v-model:value="value" placeholder="" style="width: 480px;height: 40px;vertical-align: bottom;margin-left: 8px;" />
            </div>



            <div class="mt20">
              <span class="titles"><span class="xinghao">*</span>职位描述</span>
              <!-- 富文本 -->
              <UE
                editorId="sponsorEditor"
                :initContent="ueSponsorInit"
                @input="getSponsorContent"
              />
            </div>


            <div class="mt20">
              <p class="txtt">职位要求</p>
              <div class="flx1">
                <div class="flx2">
                  <span class="titles"><span class="xinghao">*</span>学历要求</span>
                  <a-input v-model:value="value" placeholder="" style="width: 280px;height: 40px;" />
                </div>
                <div class="flx2">
                  <span class="titles"><span class="xinghao">*</span>经验</span>
                  <a-select
                        ref="select"
                        v-model:value="value1"
                        style="width: 280px;height: 40px;"
                        @focus="focus"
                        @change="handleChange"
                      >
                        <a-select-option value="jack">Jack</a-select-option>
                        <a-select-option value="lucy">Lucy</a-select-option>
                        <a-select-option value="disabled" disabled>Disabled</a-select-option>
                        <a-select-option value="Yiminghe">yiminghe</a-select-option>
                      </a-select>
                </div>
                <div class="flx2">
                  <span class="titles"><span class="xinghao">*</span>残疾类别</span>
                  <a-select
                        ref="select"
                        v-model:value="value1"
                        style="width: 280px;height: 40px;"
                        @focus="focus"
                        @change="handleChange"
                      >
                        <a-select-option value="jack">Jack</a-select-option>
                        <a-select-option value="lucy">Lucy</a-select-option>
                        <a-select-option value="disabled" disabled>Disabled</a-select-option>
                        <a-select-option value="Yiminghe">yiminghe</a-select-option>
                      </a-select>
                </div>
                <div class="flx2">
                  <span class="titles"><span class="xinghao">*</span>其他</span>
                  <a-checkbox style="margin-top:10px" v-model:checked="checked">急招</a-checkbox>
                </div>


              </div>

            </div>

            <div class="mt20">
              <a-button @click="showtable()" style="width: 108px;height: 40px;">返回</a-button>
              <a-button type="primary" style="width: 108px;height: 40px;margin-left: 16px;">提交</a-button>
            </div>

          </div>


      </a-tab-pane>
    </a-tabs>
    <Loading v-show="onLoading"></Loading>
    <!-- 预览页面弹窗 -->
    <div class="zjinfotc" v-if="prevtcshow">
      <div class="zjzhezhao"></div>
      <div class="zhuanjiainfotc" >

        <div class="zjclose2">
          <img src="@/assets/image/competition/close2.png" alt="">
        </div>
        <div class="zjclose" @click="prevtcshow=false">
          <img src="@/assets/image/competition/close.png" alt="">
        </div>
        <div class="contentsf">
          <p class="prevtitle">北京发布新标准，绿化景观应设置无障碍游览流线</p>
          <p class="abstract">摘要：北京市规自委与市市场监管局联合发布本市地方标准《公共建筑无障碍设计标准》，将于今年7月1日起实施。</p>
          <div class="wznr">
            <p>
              	无障碍设计不仅服务于残障人士，近日，北京市规自委与市市场监管局联合发布本市地方标准《公共建筑无障碍设计标准》，将于今年7月1日起实施。
            </p>
            <p>
              <img src="@/assets/image/enterprise/aticelimg.png" alt="">
            </p>
            <p>
              	无障碍设施不仅要在有需求的场所多点分布，更要形成通畅的网络。此次《标准》对公共场所无障碍环境设计的系统性进行强化，保证不同场地空间与设施之间的无障碍衔接。《标准》对无障碍通行流线上的主要节点均提出具体设计要求，其中包括绿化景观入口应为无障碍出入口，并应设置无障碍游览流线；无障碍机动车停车位应能够通过无障碍通行流线到达建筑的无障碍出入口等。
              	按照《标准》要求，无障碍通行流线上的标识物、垃圾桶、座椅、灯柱、隔离墩、地灯和地面布线等设施均不应妨碍行动障碍者的独立通行。当设置地毯时，不应设置厚地毯，并应与地面固定，当边缘高度超过6毫米时，应以斜面过渡。
            </p>
          </div>

        </div>

      </div>
    </div>

  </div>
</template>

<script>
  import UE from "@/components/UE.vue";
  export default {
    // 可用组件的哈希表
    components: { UE },
    data() {
      return {

        dataSource: [{
            key: '1',
            name: '电话客服',
            recruit:'1',
            state: '0',
            state1:'1'
          },
          {
            key: '2',
            name: '电话客服',
            recruit:'2',
            state: '1',
            state1:'0'
          },
          {
            key: '3',
            name: '电话客服',
            recruit:'3',
            state: '2',
            state1:'1'
          },
          {
            key: '4',
            name: '电话客服',
            recruit:'4',
            state: '0',
            state1:'1'
          },
          {
            key: '5',
            name: '电话客服',
            recruit:'5',
            state: '1',
            state1:'1'
          },
          {
            key: '6',
            name: '电话客服',
            recruit:'6',
            state: '2',
            state1:'0'
          },
        ],
        columns: [{
            title: '序号',
            dataIndex: 'key',
          },
          {
            title: '职位名称',
            dataIndex: 'name',
          },
          {
            title: '招聘人数',
            dataIndex: 'recruit',
          },
          {
            title: '审核状态',
            dataIndex: 'state',
            scopedSlots: {
              customRender: 'state'
            }
          },
          {
            title: '状态',
            dataIndex: 'state1',
            scopedSlots: {
              customRender: 'state1'
            }
          },

          {
            title: '操作',
            key: 'key',
            dataIndex: 'cover',
            scopedSlots: {
              customRender: 'cover'
            }
          },
        ],
        flag: false,
        onLoading: false,
        tableshow:true,
        createnew:false,
        values:1,
        prevtcshow:false
      };
    },
    mounted() {

    },
    methods: {
      createnewfc(){
        this.tableshow=false;
        this.createnew=true;
      },
      showtable(){
        this.tableshow=true;
        this.createnew=false;
      }
    },
  };
</script>

<style lang="less" scoped>

  /deep/.ant-upload-picture-card-wrapper {
    width: auto;
    height: 102px;
}

  ::-webkit-scrollbar-track-piece {

    border-radius: 6px;
    background-color: #ccc;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #eee;
    background-clip: padding-box;
    min-height: 28px;
  }
  .abstract{
    width: 886px;
    height: 44px;
    background: #F5F5F5;
    line-height: 44px;
    padding-left: 12px;
    margin-bottom: 16px;
  }
  .noyong{
    color:#999999
  }
  .wznr>p{
    margin:8px 0;
    line-height: 24px;
  }
  .prevtitle{
    width: auto;
    height: 33px;
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1A1A1A;
    line-height: 33px;
    margin-bottom: 24px;
  }
  .warptop {
    margin-bottom: 20px;
    height: 30px;
  }

  .previewWarp{
    width: 528px;
    height: 33px;
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1A1A1A;
    line-height: 33px;
    position: fixed;
  }

  .flx3{
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    width: 600px;
  }

  .disinline{
    vertical-align: text-top;
  }

  .form1{
    margin-bottom: 20px;
        margin-top: 12px;
  }

  .checkvalue{
    margin-top: 16px;
  }

  .zjname{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    margin:0 8px;
  }
  .txt88{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }
  .txt32{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
  .titles{
    display: block;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color:#333333;
    margin-bottom: 8px;
  }
  .zjdpimg{
    width: 24px;
    height: 24px;
    vertical-align: top;
  }
  .mt20{
    margin-top: 20px;
  }
  .xinghao{
    color: #D51313;
    margin-right: 4px;
  }


  .dots {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 6px;
  }

  .dotdaishen {
    background: #FF7E2E;
  }

  .dotyishen {
    background: #3C7EFF;
  }

  .dotyibo {
    background: #D51313;
  }

  .txta {
    margin-right: 16px;
  }

  /deep/.ant-tabs-nav .ant-tabs-tab-active {
    color: #333333;
    text-shadow: 0 0 0.25px currentColor;
    font-weight: 600;
  }



  .zjzhezhao{
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.5);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10000;
    }

    .zjclose{
      position: absolute;
      right: 16px;
      top: 16px;
      cursor: pointer;
    }
    .zjclose2{
     position: absolute;
     right: 0px;
     top: 0px;
     cursor: pointer;
    }

    .zhuanjiainfotc{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 10000;
      padding: 32px;
      width: 950px;
      height: 730px;
      background: #FFFFFF;
      border-radius: 10px;
      overflow-y: auto;
    }

    .wxleft{
      display: inline-block;
      vertical-align: bottom;
    }

    .wxleft>img{
      width: 48px;
    }

    .wxmt32{
      margin-top:20px;
      height: 65px;
      position: relative;
    }

    .ml16{
      margin-left: 16px;
      margin-top: 10px;
    }

    .ft32{
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #1A1A1A;
      line-height: 30px;
    }

    .infotxt{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1A1A1A;
      line-height: 24px;
    }

    .infotitle{
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1A1A1A;
      line-height: 25px;
      text-align: center;
    }

    .ft14c{
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 20px;
    }

    .flx1{
      display: flex;
          width: 640px;
          justify-content: space-between;
          align-content: space-around;
          flex-wrap: wrap;
          align-items: flex-start;
          flex-direction: row;
    }

    .flx2{
      width: 280px;
      margin-bottom: 20px;
    }

    /deep/.zwxx .ant-select-selection--single{
      height: 40px;
    }
.txtt{
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 16px;
}
</style>
